<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>SpringMVC-Spring-JPA</title>

    <link href="<c:url value='/css/bootstrap.min.css'></c:url>" rel="stylesheet">

    <script type="text/javascript" src="<c:url value='/js/jquery.min.js'></c:url>"></script>
    <script type="text/javascript" src="<c:url value='/js/jquery-1.11.3.js'></c:url>"></script>
    <script type="text/javascript" src="<c:url value='/js/bootstrap.min.js'></c:url>"></script>

    <script>

        function timeFormat(time) {
            var d = new Date(time);

            var year = d.getFullYear();       //年
            var month = d.getMonth() + 1;     //月
            var day = d.getDate();            //日

            var hh = d.getHours();            //时
            var mm = d.getMinutes();          //分
            var ss = d.getSeconds();           //秒

            var clock = year + "-";

            if (month < 10)
                clock += "0";

            clock += month + "-";

            if (day < 10)
                clock += "0";

            clock += day + " ";

            if (hh < 10)
                clock += "0";

            clock += hh + ":";
            if (mm < 10) clock += '0';
            clock += mm + ":";

            if (ss < 10) clock += '0';
            clock += ss;
            return (clock);
        }

        //初始化列表
        function initOrder() {
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/order/findAll",
                dataType: "json",
                success: function (jsonResult) {
                    fillTable(jsonResult);
                }
            });
        }

        function fillTable(jsonResult) {
            var innerHTML = "";
            $("#orderTableTbody").html(innerHTML);
            for (var i = 0; i < jsonResult.length; i++) {
                var order = jsonResult[i];
                innerHTML +=
                    "<tr>" +
                    "<td>" + order.id + "</td>" +
                    "<td>" + order.name + "</td>" +
                    "<td>" + order.amount + "</td>" +
                    "<td>" + order.status + "</td>" +
                    "<td>" + timeFormat(order.createDate) + "</td>" +
                    '<td><button type="button btn-primary btn-lg" data-toggle="modal" data-target="#myModalOne" ' +
                    'class="btn btn-xs btn-primary" onclick="payOrder(\'' + order.id + '\')" >支付</button>'
                innerHTML += "</td></tr>";
            }
            $("#orderTableTbody").html(innerHTML);
        }

        //支付
        function payOrder(id) {
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/order/pay",
                dataType: "json",
                data: {id: id},
                success: function (data) {
                    alert(data.msg)
                    window.location.reload();
                },
                error: function (data) {
                    alert("支付异常")
                }
            })
        }

        //创建订单
        function createOrder() {
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/order/create",
                dataType: "json",
                success: function (data) {
                    window.location.reload();
                },
                error: function (data) {
                    alert("创建订单异常")
                }
            })
        }
    </script>

    <style>
        div {
            padding: 10px 10px 0 10px;
        }
    </style>
</head>
<body onload="initOrder()">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-sm-offset-8 col-md-12 col-md-offset-8 main main-header-parent">
            <button type="button" id="createOrder" onclick="createOrder()">创建订单</button>
        </div>
        <div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 main"
             style="padding-top: 0px;padding-left: 20px;">
            <label>订单列表</label>
            <div class="row" style="margin-top: 10px;margin-bottom: 0px">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" style="font-size: 14px;border-radius: 0px;">
                        <thead>
                        <tr>
                            <td>ID</td>
                            <td>名称</td>
                            <td>金额</td>
                            <td>状态</td>
                            <td>创建时间</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody id="orderTableTbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
